const fs = require("fs");
const path = require("path");
var MarkdownIt = require("markdown-it");
const cacheDir = "../../node_modules/.cacheDir";
const md = require("./config");
const mdIt = new MarkdownIt();
const regDemo = /\:\:\:demo((.|\n|\r)*?)\:\:\:/g;

function resolve(dir) {
  return path.join(__dirname, dir);
}

if (!fs.existsSync(resolve(cacheDir))) {
  fs.mkdirSync(resolve(cacheDir));
}

module.exports = function(source) {
  const content = md.render(source);
  const startTag = "<!--demo-begin:"; // 匹配开启标签
  const startTagLen = startTag.length;
  const endTag = ":demo-end-->"; // 匹配关闭标签
  const endTagLen = endTag.length;

  let components = ""; // 存储组件示例
  let importVueString = ""; // 存储引入组件声明
  let uid = 0; // demo 的 uid
  const outputSource = []; // 输出的内容
  let start = 0; // 字符串开始位置

  let commentStart = content.indexOf(startTag);
  let commentEnd = content.indexOf(endTag, commentStart + startTagLen);

  while (commentStart != -1 && commentEnd != -1) {
    outputSource.push(content.slice(start, commentStart)); //方法提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串。
    // 获取代码块内容
    const commentContent = content.slice(
      commentStart + startTagLen,
      commentEnd
    );
    const componentNameId = `demoContainer${uid}`;
    // 将文件写入本地
    fs.writeFileSync(
      resolve(`${cacheDir}/${componentNameId}.vue`),
      commentContent,
      "utf-8"
    );
    const eomponentString = `\`\`\`html
${commentContent}
    `;
    // 声明内容插槽传入
    outputSource.push(
      `<template slot="source"><${componentNameId} />
      </template>
      <template slot="code">
         <div class='codeContent'>
            ${mdIt.render(eomponentString)}
         </div>
      </template>
      `
    );
    // 添加引入声明
    importVueString += `\nimport ${componentNameId} from '${cacheDir}/${componentNameId}.vue';`;
    // 添加组件声明
    components += `${componentNameId},`;
    // 重新计算下一次的位置
    uid++;
    start = commentEnd + endTagLen;
    commentStart = content.indexOf(startTag, start);
    commentEnd = content.indexOf(endTag, commentStart + startTagLen);
  }

  // 后续内容添加
  outputSource.push(content.slice(start));

  const code = `
        <template>
            <section class="demo-container">
              ${outputSource.join("")}
            </section>
        </template>
      <script>
          ${importVueString}
          export default {
            name: 'demo-container',
            components: {
              ${components}
            },
          }
      </script>
`;
  return code;
};
